// 交互的函数
import { graphFocusNode, comboChange, graphFocusNodes } from "./topoService";
import {map} from 'lodash'
export const basicTopoInteractions = {
  "node:mouseenter": (evt, graph) => {
    const { item } = evt;
    graphFocusNode(item, graph);
    graph.setItemState(item, "hover", true);
  },
  "node:mouseleave": (evt, graph) => {
    const { item } = evt;
    graphFocusNode("", graph);
    graph.setItemState(item, "hover", false);
  },
  "node:click": (evt) => {
    const { item } = evt;
    const targetName = evt.target.get("name");

    const model = item.getModel();
    if (model.id === "external") {
      return;
    }
    const inEdges = item.getInEdges();
    let srcNodes = [];
    if (model?.extraSrcNodes?.length) {
      srcNodes = model.extraSrcNodes;
    } else {
      // 需要过滤掉源端为external的节点(貌似不需要过滤掉了，这里不会有external点，先保留吧)
      srcNodes = map(inEdges, (edge) => edge.getSource().getModel()).filter(
        (node) => node.id !== "external"
      );
    }

    // todo 查看节点详情
    // this.setState({
    //   nodeInfo: model,
    //   srcNodes: uniqBy(srcNodes, "id").filter(
    //     ({ type }) => type !== "custom-combo"
    //   ),
    //   nodeDetailVisible: true,
    //   detailDefaultActiveKey:
    //     targetName?.indexOf("alarm-img") > -1 ? "alarm" : "net",
    // });
  },

  "edge:click": (evt) => {
    const { item } = evt;
    const source = item.getSource().getModel();
    const target = item.getTarget().getModel();
    if (source.collapsed || target.collapsed) {
      return;
    }
    if (source.id === "external") {
      return;
    }
    const model = item.getModel();
    // todo 边的详情
    // this.setState({
    //   edgeInfo: model,
    //   edgeDetailVisible: true,
    // });
  },
  "combo:click": (evt, graph) => {
    evt.item._xxx = true;
    graph.collapseExpandCombo(evt.item);
  },
  aftercollapseexpandcombo: (evt, graph) => {
    const config = {
      nodeWidth: 220,
      nodeHeight: 122,
      wSpace: 46,
      hSpace: 48,
      comboSize: [132, 0],
      comboPadding: [54, 16, 16, 16],
    };
    comboChange(evt, graph, config);
  },
  nodeselectchange(e, graph) {
     // 当前操作后，所有被选中的 items 集合
  console.log(e.selectedItems);
  // 当前操作时选中(true)还是取消选中(false)
  console.log(e.select);
  graphFocusNodes(e.selectedItems.nodes, graph)
  e.selectedItems.nodes.forEach((node) => {
    graph.setItemState(node, 'hover', e.select)
  })
  }
};

export const editTopoInteraction = {
  "node:mouseenter": (evt, graph) => {
    const { item } = evt;
    graphFocusNode(item, graph);
    graph.setItemState(item, "hover", true);
  },
  "node:mouseleave": (evt, graph) => {
    const { item } = evt;
    graphFocusNode("", graph);
    graph.setItemState(item, "moreActive", false);
    graph.setItemState(item, "hover", false);
  },
  "node:mouseover": (evt, graph) => {
    const { item } = evt;
    const targetName = evt.target.get("name");
    if (targetName.indexOf("node-more") > -1) {
      graph.setItemState(item, "moreActive", true);
    } else {
      graph.setItemState(item, "moreActive", false);
    }
  },

};

export const mergeTopoInteraction = {
  "node:mouseenter": (evt, graph) => {
    const { item } = evt;
    graphFocusNode(item, graph);
    graph.setItemState(item, "hover", true);
  },
  "node:mouseleave": (evt, graph) => {
    const { item } = evt;
    graphFocusNode("", graph);
    graph.setItemState(item, "hover", false);
  },
  aftercollapseexpandcombo: (evt) => {
    const config = {
      nodeWidth: 130,
      nodeHeight: 68,
      wSpace: 46,
      hSpace: 48,
      comboSize: [132, 0],
      comboPadding: [54, 16, 16, 16],
    };
    comboChange(evt, graph, config);
  },
};
